<template>
  <div id="app">
<!--    <div id="map" class="map"></div>-->
<!--    <img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
  import 'ol/ol.css';
  import Map from 'ol/Map';
  import OSM from 'ol/source/OSM';
  import TileLayer from 'ol/layer/Tile';
  import View from 'ol/View';
  import WMTS from 'ol/source/WMTS';
  import WMTSTileGrid from 'ol/tilegrid/WMTS';
  import {get as getProjection} from 'ol/proj';
  import {getTopLeft, getWidth} from 'ol/extent';

  let projection = getProjection('EPSG:4326');
  let projectionExtent = projection.getExtent();
  let size = getWidth(projectionExtent) / 256;
  let resolutions = new Array(14);
  let matrixIds = new Array(14);
  for (let z = 0; z < 14; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = z;
  }


  export default {
    name: 'App',
    data() {
      return {
        map: {},
        //mapUrl: 'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
        mapUrl: 'https://10.35.16.11:6443/arcgis/rest/services/TFJC/ZT_Tile_TFJC_Normal_Label_WGS/MapServer/WMTS',
        lngCenter: 104.32904023669647,
        latCenter: 30.138464904057606,
        zoom: 13,
        minZoom: 2,
        maxZoom: 23,
        from_epsg: 'EPSG:4326',
        to_epsg: 'EPSG:4326',
      }
    },
    mounted() {
      // this.initMap();
    },
    methods: {
      // 初始化地图
      initMap() {
        this.map = new Map({
          target: 'map',
          layers: [
            new TileLayer({
              source: new OSM(),
              opacity: 0.7,
            }),
            new TileLayer({
              opacity: 0.7,
              source: new WMTS({
                attributions:
                  'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/' +
                  'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>',
                url:this.mapUrl,
                layer: '0',
                matrixSet: 'EPSG:4326',
                format: 'image/png',
                projection: projection,
                tileGrid: new WMTSTileGrid({
                  origin: getTopLeft(projectionExtent),
                  resolutions: resolutions,
                  matrixIds: matrixIds,
                }),
                style: 'default',
                wrapX: true,
              }),
            }) ],
          view: new View({
            center: [-11158582, 4813697],
            zoom: 4,
          }),
        });
      },
    }
  }
</script>

<style>
  /*html,body{*/
  /*  margin: 0;*/
  /*  padding: 0;*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*}*/

  /*#map {*/
  /*  position: relative;*/
  /*  flex: 1;*/
  /*  top: 0;*/
  /*  left: 0;*/
  /*  height: 100%;*/
  /*  width: 100%;*/
  /*}*/
  *{
    margin: 0;
    padding: 0;
  }
  html, body{
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
  }
  #app {
    height: 100%;
    width: 100%;
  }
</style>
